<script setup>
import {onBeforeMount, reactive} from "vue";
import {getDataList} from "../api/api.js";
import BlackCard from "@/components/card/BlackCard.vue";
import BlackTable from "@/components/table/BlackTable.vue";
import {tabMap,tabFormat} from "@/utils/common.ts";
import router from "@/router/router.js";
const allInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: []
})
const classInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: [],
  type: '2'
})
const formatter = (row,column,cellValue) => {
  return tabFormat(cellValue);
}
const clickTab = (index) => {
  classInfo.type = index;
  getMsg(classInfo);
}
const getMsg = (pageInfo) => {
  getDataList(pageInfo).then(res => {
    pageInfo.total = res.total;
    pageInfo.list = res.list;
  });
}
const clickRow = (row) => {
  router.push({
    path: '/data/content',
    query: {...row}
  })
}
onBeforeMount(() => {
  getMsg(allInfo);
  getMsg(classInfo);
})
</script>

<template>
  <div class="view-container">
    <div>
      <el-image src="/img/blue_logo.png" fit="contain" style="width: 30vh"></el-image>
    </div>
    <video
        id="video"
        src="/img/video.mp4"
        controls="controls"
        poster="/img/video.jpg"
        type="video/mp4"
    ></video>
    <div class="hor-container">
      <black-card id="allMsg" title="综合">
        <black-table :page-info="allInfo" :query="getMsg" :click-row="clickRow">
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template #default="scope">
              <div style="text-decoration:none;cursor: pointer;">
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期"></el-table-column>
        </black-table>
      </black-card>
      <black-card id="classMsg" slot-type="other">
        <template v-slot:header>
          <el-radio-group v-model="classInfo.type" size="small" @change="clickTab">
            <el-radio-button v-for="key in Object.keys(tabMap)" :label="tabMap[key]" :value="key"/>
          </el-radio-group>
        </template>
        <template v-slot:default>
          <black-table :page-info="classInfo" :query="getMsg" :click-row="clickRow">
            <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
            <el-table-column prop="title" label="标题" show-overflow-tooltip>
              <template #default="scope">
                <div style="text-decoration:none;cursor: pointer;">
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="日期"></el-table-column>
          </black-table>
        </template>
      </black-card>
    </div>
  </div>
</template>

<style scoped>
#video {
  background-color: black;
  width: 100%;
  height: 80vh;
  border-radius: 1em;
  object-fit: fill;
}

#allMsg {
  width: 40%;
}

#classMsg {
  width: 60%;
}

.el-radio-group{
  font-size: 1em;
}

/* 移动端适配 */
@media (max-width: 768px) {
  #video {
    height: 50vh;
    border-radius: 0.5em;
  }
  
  #allMsg,
  #classMsg {
    width: 100%;
  }
  
  .el-radio-group {
    font-size: 0.9em;
  }
  
  .el-radio-button__inner {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #video {
    height: 40vh;
    border-radius: 0.3em;
  }
  
  .el-radio-group {
    font-size: 0.8em;
  }
  
  .el-radio-button__inner {
    padding: 6px 10px;
    font-size: 11px;
  }
}
</style>